<template>
  <view>
    <u-navbar
      :background="background"
      :immersive="true"
      title=" "
      :border-bottom="false"></u-navbar>
    <u-swiper
      height="650"
      :autoplay="false"
      mode="number"
      img-mode="scaleToFill"
      indicator-pos="bottomRight"
      :list="info.images"></u-swiper>
    <view class="wrap">
      <view class="box">
        <view class="price n-flex-row n-justify-between n-align-center">
          <view class="qian">{{$t('¥')}}{{ info.price }}</view>
        </view>
        <view style="margin-top: 20rpx; font-size: 32rpx">
          {{ info.title }}
        </view>
      </view>
      <view
        class="info"
        style="margin-top: 10rpx">
        <view class="tit">
          <u-divider>{{$t('商品详情')}}</u-divider>
        </view>
        <view class="goods_content">
          <u-parse :html="info.content"></u-parse>
        </view>
      </view>
    </view>

    <u-popup
      v-model="agreementShow"
      @close="agreementShow = false"
      mode="center"
      :safe-area-inset-bottom="true">
      <view class="agreement-view">
        <!-- <view class="agreement-view-view"> -->
        <view class="agreement-view-title">{{ deliveryRuleTextTitle }}</view>
        <scroll-view
          :scroll-top="0"
          scroll-y="true"
          class="scroll-rule-Y">
          <u-parse :html="deliveryRuleText"></u-parse>
        </scroll-view>
        <!-- </view> -->
        <view
          class="agreement-view-btn"
          @click="agreementShow = false"
          >{{$t('知道了')}}</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        backgroundColor: "",
      },
      agreementShow: false,
      show: false,
      num: 1,
      isBuy: true,
      id: "",
      info: "",
      kfshow: false,
      bi: 0,
      deliveryRuleText: "",
      deliveryRuleTextTitle: "",
      buyType: 1, // 1幸运币 2 理解购买
    };
  },
  components: {},
  onPageScroll(e) {
    if (e.scrollTop >= 150) {
      this.background.backgroundColor = "#fff";
    } else {
      this.background.backgroundColor = "";
    }
  },
  onLoad(option) {
    this.id = option.id;
    this.getInfo();
    if (uni.getStorageSync("user")) {
      this.getBi();
    }
    this.getDeliveryRuleText();
  },
  methods: {
    openBuy(type) {
      this.show = true;
      this.isBuy = true;
      this.buyType = type;
    },
    hide() {
      this.kfshow = false;
    },
    getDeliveryRuleText() {
      this.$http({
        url: "api/common/get_agreement",
        data: {
          name: "delivery_rule",
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            this.deliveryRuleText = res.data.data.content;
            this.deliveryRuleTextTitle = res.data.data.title;
          } else {
            this.$tip.tip(res.data.msg);
          }
        })
        .catch((err) => {});
    },

    buy() {
      var data = {
        type: 1,
        id: this.info.id,
        image: this.info.goodsPic,
        name: this.info.title,
        num: this.num,
        price: this.info.price,
        integral: this.info.integral,
        freight_value: this.info.freight_value,
        goods_type: this.info.goods_type,
        buyType: this.buyType,
      };
      uni.setStorageSync("goods", data);
      uni.navigateTo({
        url: "/pages/mall/confirmOrder",
      });
    },
    getBi() {
      this.$http({
        url: "api/member/get_user_info",
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.bi = res.data.data.integral;
            uni.setStorageSync("user", res.data.data);
            uni.$emit("updataUser");
          }
        })
        .catch((err) => {});
    },
    getInfo() {
      this.$http({
        url: "api/common/get_goods_info",
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.info = res.data.data;
            this.info.freight_value = parseInt(
              res.data.data.freight_value
            ).toFixed(2);
            this.info.goodsPic = this.info.image;
          }
        })
        .catch((err) => {});
    },
    formatRichText(html) {
      if (!html) {
        return;
      }
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "width:100%;")
            .replace(/width:[^;]+;/gi, "width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="width:100%;height:auto;display:block;"'
      );
      return newContent;
    },
    valChange(e) {
      console.log("当前值为: " + e.value);
    },
    // 弹出层收起
    close() {
      this.num = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../static/css/goodsInfo.css");
.row {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  width: 100%;
}

.hui {
  color: #999;
  font-size: 26rpx;
}

.row .pri {
  font-size: 34rpx;
  font-weight: bold;
}
.row-list {
  display: flex;
  // margin-bottom: 20rpx;
}
.row-list-cell {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  width: 100%;
  margin-top: 1rpx;
}
.row-list-cell-right {
  display: flex;
  align-items: center;
  .u-icon {
    margin-left: 16rpx;
  }
}

.agreement-view {
  width: 580rpx;
  height: 800rpx;
  background-color: #845ec2;
  border-radius: 40rpx;
  overflow: hidden;
  .agreement-view-btn {
    width: 540rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    font-size: 30rpx;
    color: #845ec2;
    height: 80rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
  }
}
.agreement-view-title {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 30rpx;
  text-align: center;
  color: #fff;
}
.scroll-rule-Y {
  height: 500rpx;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
  margin: 6rpx auto;
  color: #fff;
}

.buy-btn {
  display: flex;
  width: 100%;
  justify-content: space-between;
  .buy-btn-0 {
    background-color: #e09250;
    color: #fff;
    width: 260rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .buy-btn-1 {
    background-color: #000;
    color: #fff;
    width: 260rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.qweqwe {
  background-color: #fff;
  width: 100%;
  color: #000;
  margin-top: 25%;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
